<template>
    <div class="admin-product">
        <div class="admin-product-header">新增产品</div>
        <div class="admin-product-content">
            <el-form :model="company" label-width="auto" style="max-width: 1000px">
                <!-- 标题 -->
                <div class="form-wrapper">
                    <div>
                        <el-form-item label="销售电话">
                            <el-input v-model="company.sel_tel" />
                        </el-form-item>
                    </div>
                    <div style="margin-left: 270px;">
                        <el-form-item label="技术电话">
                            <el-input v-model="company.tech_tel" />
                        </el-form-item>
                    </div>
                </div>

                <!-- 价格 -->
                <div >
                    <div>
                        <el-form-item label="工作时间">
                            <el-input v-model="company.work_time" />
                        </el-form-item>
                    </div>
                </div>
                <div>
                    <div>
                        <el-form-item label="工作时间（英文）">
                            <el-input v-model="company.work_time_en" />
                        </el-form-item>
                    </div>
                </div>
                <div >
                    <div>
                        <el-form-item label="邮件">
                            <el-input v-model="company.email" />
                        </el-form-item>
                    </div>
                </div>
                <div>
                    <div>
                        <el-form-item label="地址">
                            <el-input v-model="company.address" />
                        </el-form-item>
                    </div>
                </div>
                <div>
                    <div>
                        <el-form-item label="地址（英文）">
                            <el-input v-model="company.address_en" />
                        </el-form-item>
                    </div>
                </div>
                <div>
                    <el-form-item label="网站备案">
                            <el-input v-model="company.web" />
                        </el-form-item>
                </div>
                <div class="form-wrapper">
                    <div>
                        <el-form-item label="简介（中文）">
                            <el-input v-model="company.content" type="textarea" :rows="16" style="width: 300px;" />
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="简介（英文）">
                            <el-input v-model="company.content_en" type="textarea" :rows="16"
                                style="width: 300px;" />
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <div style="text-align: center; margin-top: 20px;">
                <el-button type="primary" @click="updateForCompanyInfo">更新公司信息</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { getCompanyInfo, updateCompanyInfo } from '../../requests/index';

const router = useRouter();
const loading = ref(true);


const company = ref({
    sel_tel: "",
    tech_tel: "",
    work_time: "",
    work_time_en: "",
    email: "",
    address: "",
    address_en: "",
    web: "",
    content: "",
    content_en: "",
});

const forCompanyInfo = async()=>{
    const res = await getCompanyInfo();
    if (res.status === 2000){
        company.value.sel_tel = res.data.sel_tel;
        company.value.tech_tel = res.data.tech_tel;
        company.value.work_time = res.data.work_time;
        company.value.work_time_en = res.data.work_time_en;
        company.value.email = res.data.email;
        company.value.address = res.data.address;
        company.value.address_en = res.data.address_en;
        company.value.web = res.data.web;
        company.value.content = res.data.content;
        company.value.content_en = res.data.content_en;
    }
};

onBeforeMount(()=>{
    forCompanyInfo();
});


// 更新公司信息
const updateForCompanyInfo = async()=>{
    console.log(company.value)
    const res = await updateCompanyInfo(company.value);
    if (res.status === 2000){
        ElMessage.success("更新成功");
    }else{
        ElMessage.error("更新失败");
    }
}


</script>

<style scoped>
.admin-product-header {
    margin-top: 20px;
    margin-left: 20px;
    height: 40px;
    line-height: 40px;
    background-color: #F9F9F9;
    padding-left: 20px;
    padding-right: 20px;
}

.admin-product-content {
    margin-top: 80px;
    margin-bottom: 50px;
    margin-left: 20px;
}

.admin-product {
    display: flex;
    text-align: center;
    min-height: 100px;
}

.form-wrapper > div {
    display: inline-block;
}
</style>